@charset "utf-8";
html {
  overflow: hidden;
  height: 100%;
  body {
    overflow: hidden;
    height: 100%;
    position: relative;
    > .box {
      position: relative;
      height: 100%;
      overflow: hidden;
      > .loading {
        position: relative;
        height: 100%;
        width: 100%;
        z-index: 3;
        background: url("../images/bg1.jpg") no-repeat center/cover;
        > .icon-loading {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          font-size: 6rem;
          color: #2ECBBE;
          animation: loading 1.5s linear infinite;
        }
      }
      > .swipe {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        > section {
          position: absolute;
          left: 0;
          height: 100%;
          width: 100%;
          overflow: hidden;
          background-image: url("../images/bg2.jpg");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center center;
          text-align: center;
          color: #ffffff;
          > .bg {
            height: 100%;
            width: 100%;
            position: relative;
            > .svg {
              position: absolute;
              left: 50%;
              &:nth-of-type(1) {
                top: 0;
                height: 15rem;
                width: 15rem;
              }
              &:nth-of-type(2) {
                bottom: 0;
                height: 20rem;
                width: 20rem;
              }
              > svg {
                animation: rotate 13s linear infinite;
                > path {
                  fill: rgba(78, 198, 161, 0.4);
                  opacity: 0.25;
                }
              }
            }
            > .line {
              position: absolute;
              left: 50%;
              bottom: 0;
              &::before, &::after {
                content: '';
                position: absolute;
                transform: rotate(45deg);
                width: 1px;
                height: 20rem;
                background-color: rgba(78, 198, 161, 0.4);
              }
              &::before {
                bottom: 1rem;
                left: 13rem;
              }
              &::after {
                bottom: 5rem;
                left: 15rem;
              }
            }
          }
          > .titbox {
            position: absolute;
            left: 50%;
            > .box1 {
              position: absolute;
              top: 0rem;
              right: 14rem;
              height: 14rem;
              width: 14rem;
              background-color: rgba(8, 222, 204, 0.5);
              transform: rotate(45deg);
            }
            > .box2 {
              position: absolute;
              top: 0rem;
              right: 10rem;
              height: 14rem;
              width: 14rem;
              background-color: rgba(8, 222, 204, 1);
              transform: rotate(45deg);
            }
            > .text {
              position: absolute;
              top: 2.6rem;
              left: -13rem;
              font-family: "微软雅黑";
              color: #000;
              padding-top: 3rem;
              text-align: left;
              > p {
                white-space: nowrap;
                &:nth-of-type(1) {
                  font-size: 2.2rem;
                }
                &:nth-of-type(2) {
                  font-size: 1.7rem;
                }
                &:nth-of-type(3) {
                  font-size: 1.4rem;
                  display: block;
                  span {
                    display: block;
                    overflow: hidden;
                  }
                }
              }
            }
          }
          &.active {
            > .titbox {
              > .box1 {
                transition: all 1s 0.2s;
                right: 1rem;
              }
              > .box2 {
                transition: all 1s;
                right: 2.2rem;
              }
            }
          }
          &:nth-of-type(1) {
            background-image: url("../images/bg1.jpg");
            > .box1 {
              position: absolute;
              top: 55%;
              left: 50%;
              height: 6.5rem;
              width: 6.5rem;
              transform: translate(-50%, 0) rotate(45deg) scale(0, 0);
              background-color: rgba(46, 203, 190, .5);
            }
            > .box2 {
              position: absolute;
              top: 15%;
              left: 50%;
              height: 24rem;
              width: 24rem;
              transform: translate(-50%, 0) rotate(0deg);
              > .titbg {
                position: absolute;
                top: 50%;
                left: 50%;
                height: 57%;
                width: 57%;
                transform: translate(-50%, -49%) rotate(45deg) scale(0.2, 0.2);
                background-color: #2ECBBE;
                opacity: 0;
              }
              > .tittext {
                position: relative;
                color: #010505;
                text-align: center;
                height: 100%;
                padding-top: 38%;
                > h2 {
                  font: 2.6rem/4.5rem "微软雅黑";
                  transform: translateY(-100%);
                  opacity: 0;
                }
                > h3 {
                  font: 2.2rem/3rem "微软雅黑";
                  transform: translateY(100%);
                  opacity: 0;
                }
              }
              > .border {
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                width: 100%;
                > li {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 100%;
                  background: url("../images/border.png") no-repeat center center/cover;
                  transform: rotateY(90deg);
                  opacity: 0;
                }
              }
            }
            > h3 {
              margin-top: 39rem;
              font: 300 1.7rem/2rem "微软雅黑";
              transform: scale(0, 0);
              opacity: 0;
            }
            &.active { /*带有这个类名的section是正在显示的页面,激活动画*/
              > .box1 {
                transition: all 1s;
                transform: translate(-50%, 0) rotate(45deg) scale(1, 1);
              }
              > .box2 {
                transform-style: preserve-3d;
                > .titbg {
                  transition: all 2.5s;
                  transform: translate(-50%, -49%) rotate(45deg);
                  opacity: 1;
                }
                > .tittext {
                  > h2 {
                    transition: all 1.5s;
                    transform: translateY(0);
                    opacity: 1;
                  }
                  > h3 {
                    transition: all 2s;
                    transform: translateY(0);
                    opacity: 1;
                  }
                }
                > .border {
                  transform-style: preserve-3d;
                  > li {
                    transform: rotateY(0deg);
                    .transition(@t) {
                      transition: all 1s @t cubic-bezier(0.29, 0.82, 0.63, 1.9);
                      opacity: 1;
                    }
                    &:nth-of-type(1) {
                      .transition(0s);
                    }
                    &:nth-of-type(2) {
                      .transition(.1s);
                    }
                    &:nth-of-type(3) {
                      .transition(.2s);
                    }
                    &:nth-of-type(4) {
                      .transition(.3s);
                    }
                    &:nth-of-type(5) {
                      .transition(.4s);
                    }
                    &:nth-of-type(6) {
                      .transition(.5s);
                    }
                    &:nth-of-type(7) {
                      .transition(.6s);
                    }
                    &:nth-of-type(8) {
                      .transition(.7s);
                    }
                    &:nth-of-type(9) {
                      .transition(.8s);
                    }
                    &:nth-of-type(10) {
                      .transition(.9s);
                    }
                  }
                }
              }
              > h3 {
                transition: opacity 1s 0.5s;
                opacity: 1;
                animation: name 2s 0.5s linear forwards;
              }
            }
          }
          &:nth-of-type(2) {
            > .bg {
              > .svg {
                &:nth-of-type(1) {
                  transform: translate(40%, 10%);
                }
                &:nth-of-type(2) {
                  transform: translate(-105%, 5%);
                }
              }
              > .line {
                position: absolute;
                left: 50%;
                bottom: 0;
                &::before, &::after {
                  content: '';
                  position: absolute;
                  transform: rotate(45deg);
                  width: 1px;
                  height: 20rem;
                  background-color: rgba(78, 198, 161, 0.4);
                }
                &::before {
                  bottom: 1rem;
                  left: 13rem;
                }
                &::after {
                  bottom: 5rem;
                  left: 15rem;
                }
              }
            }
            > .titbox {
              top: -1.8rem;
              > .text {
                > p {
                  &:nth-of-type(3) {
                    width: 8rem;
                  }
                }
              }
            }
            > .info {
              position: absolute;
              top: 17rem;
              left: 50%;
              transform: translate(-110%, 0) scale(0, 0);
              text-align: left;
              font: 300 1.3rem/2.5rem "微软雅黑";
            }
            > .imgbg, > .img {
              position: absolute;
              left: 50%;
              top: 12rem;
              background-color: rgba(8, 222, 204, 1);
              transform: translate(10%, 0) scale(0, 0);
              height: 13.6rem;
              width: 10.5rem;
              border: 3px solid rgba(8, 222, 204, 1);
              box-sizing: content-box;
            }
            > .img {
              padding: 3px;
              border: none;
              opacity: 0;
              > i {
                display: block;
                height: 100%;
                width: 100%;
                background: url("../images/huhan.jpg") no-repeat center/cover;
              }
            }
            > .evaluation {
              position: absolute;
              top: 32rem;
              left: 50%;
              transform: translate(-50%, 0);
              height: 11.2rem;
              width: 22.5rem;
              > div {
                float: left;
                font-family: "微软雅黑";
                font-weight: 300;
              }
              > .tit {
                padding: 0.7rem 0.5rem 0rem;
                width: 2.5rem;
                font-size: 2rem;
                line-height: 2.5rem;
                transform: translate(-300%, 0);
              }
              > .line {
                margin-left: 1rem;
                width: 0.35rem;
                height: 100%;
                background-color: rgba(8, 222, 204, 1);
                transform: translate(0, 200%);
              }
              > .text {
                padding-left: 1rem;
                float: none;
                overflow: hidden;
                transform: translate(200%, 0);
                > p {
                  text-align: left;
                  font-size: 1.1rem;
                  line-height: 1.6rem;
                }
              }
            }
            &.active {
              > .titbox {
                > .text > p:nth-of-type(3) {
                  span {
                    animation: text 1s steps(11, end);
                  }
                }
              }
              > .info {
                transition: all 2s 0.5s;
                transform: translate(-110%, 0) scale(1, 1);
              }
              > .imgbg {
                transition: all 1.5s;
                transform: translate(10%, 0) scale(1, 1);
              }
              > .img {
                transition: all 1.2s 0.3s;
                transform: translate(10%, 0) scale(1, 1);
                opacity: 1;
              }
              > .evaluation {
                > .tit {
                  transition: all 1s 1s;
                  transform: translate(0, 0);
                }
                > .line {
                  transition: all 1s 0.9s;
                  transform: translate(0, 0);
                }
                > .text {
                  transition: all 1s 1.2s;
                  transform: translate(0, 0);
                }
              }
            }
          }
          &:nth-of-type(3) {
            > .bg {
              > .svg {
                &:nth-of-type(1) {
                  transform: translate(40%, -5%);
                }
                &:nth-of-type(2) {
                  transform: translate(-130%, 50%);
                }
              }
            }
            > .titbox {
              top: -3rem;
              > .text {
                > p {
                  &:nth-of-type(3) {
                    width: 2.8rem;
                  }
                }
              }
            }
            > .ability {
              position: absolute;
              top: 14.5rem;
              left: 50%;
              height: 16rem;
              width: 22rem;
              transform: translate(-50%, 0);
              > .name {
                float: left;
                height: 100%;
                width: 3.6rem;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                transform: translate(0, 20%);
                opacity: 0;
                p {
                  display: block;
                  width: 3.6rem;
                  height: 3.6rem;
                  font: 500 1.6rem/3.2rem "微软雅黑";
                  border: 0.2rem dotted rgb(28, 75, 101);
                  border-radius: 50%;
                }
              }
              > .value {
                float: left;
                width: 18rem;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                padding-left: 0.4rem;
                > div {
                  width: 100%;
                  height: 2.5rem;
                  background-color: RGB(237, 240, 245);
                  transform: translate(100%, 0);
                  opacity: 0;
                  &::before {
                    content: '';
                    display: block;
                    height: 2.5rem;
                    width: 80%;
                    background-color: RGB(46, 203, 190);
                    transform: translate(-100%, 0);
                    opacity: 0;
                  }
                }
              }
            }
            > .skill {
              position: absolute;
              top: 31rem;
              left: 50%;
              height: 16rem;
              width: 21rem;
              transform: translate(-50%, 0);
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              > div {
                display: flex;
                > p {
                  display: block;
                  width: 7.5rem;
                  height: 2.3rem;
                  font: 1.1rem/2rem "微软雅黑";
                  border: 0.15rem solid RGB(45, 202, 189);
                  border-radius: 1.15rem;
                  color: #ffffff;
                  transform: scale(0, 0);
                  opacity: 0;
                }
                &:nth-of-type(1) {
                  justify-content: space-around;
                  > p {
                    width: 10rem;
                    height: 2.5rem;
                    font: 600 1.2rem/2.3rem "微软雅黑";
                    border-radius: 1.25rem;
                    background-color: RGB(45, 202, 189);
                    color: #000;
                  }
                }
                &:nth-of-type(2) {
                  justify-content: space-between;
                }
                &:nth-of-type(3), &:nth-of-type(4) {
                  justify-content: space-around;
                }
              }
            }
            &.active {
              > .titbox {
                > .text {
                  > p:nth-of-type(3) {
                    span {
                      animation: text 0.5s steps(5, end);
                    }
                  }
                }
              }
              > .ability {
                > .name {
                  transition: all 2s 1s;
                  opacity: 1;
                  transform: translate(0, 0);
                }
                > .value {
                  > div {
                    transform: translate(0, 0);
                    opacity: 1;
                    &::before {
                      transform: translate(0, 0);
                      opacity: 1;
                    }
                    &:nth-of-type(1) {
                      transition: all 2s 0.5s;
                      &::before {
                        transition: all 2s 2s;
                        width: 83%;
                      }
                    }
                    &:nth-of-type(2) {
                      transition: all 2s 0.7s;
                      &::before {
                        transition: all 2s 2.2s;
                        width: 78%;
                      }
                    }
                    &:nth-of-type(3) {
                      transition: all 2s 0.9s;
                      &::before {
                        transition: all 2s 2.4s;
                        width: 80%;
                      }
                    }
                    &:nth-of-type(4) {
                      transition: all 2s 1.1s;
                      &::before {
                        transition: all 2s 2.6s;
                        width: 70%;
                      }
                    }
                  }
                }
              }
              > .skill {
                p {
                  transform: scale(1, 1);
                  opacity: 1;
                }
                > div {
                  &:nth-of-type(1) {
                    > p {
                      transition: all 1s 2s;
                    }
                  }
                  &:nth-of-type(2) {
                    > p:nth-of-type(1) {
                      transition: all 1s 2.2s;
                    }
                    > p:nth-of-type(2) {
                      transition: all 1s 2.4s;
                    }
                  }
                  &:nth-of-type(3) {
                    > p:nth-of-type(1) {
                      transition: all 1s 2.6s;
                    }
                    > p:nth-of-type(2) {
                      transition: all 1s 2.8s;
                    }
                  }
                  &:nth-of-type(4) {
                    > p {
                      transition: all 1s 3s;
                    }
                  }
                }
              }
            }
          }
          &:nth-of-type(4) {
            background-image: url("../images/bg3.png");
            > .bg {
              > .svg {
                &:nth-of-type(1) {
                  transform: translate(40%, -5%);
                }
                &:nth-of-type(2) {
                  transform: translate(-110%, 25%);
                }
              }
            }
            > .titbox {
              top: -3rem;
              > .text {
                > p {
                  &:nth-of-type(3) {
                    width: 7.3rem;
                  }
                }
              }
            }
            > .echarts {
              position: absolute;
              top: 14.5rem;
              left: 50%;
              height: 30rem;
              width: 25rem;
              opacity:0;
              transition:all 1s cubic-bezier(0.25, 0.1, 0.43, 1.7);
              transform: translate(-50%, 0) scale(0,0);
            }
            &.active {
              > .titbox {
                > .text {
                  > p:nth-of-type(3) {
                    span {
                      animation: text 0.8s steps(10, end);
                    }
                  }
                }
              }
              > .echarts{
                opacity: 1;
                transform: translate(-50%,0) scale(1,1);
              }
            }
          }
          &:nth-of-type(5) {
            background-image: url("../images/bg3.png");
            > .bg {
              > .svg {
                &:nth-of-type(1) {
                  transform: translate(40%, -5%);
                }
                &:nth-of-type(2) {
                  transform: translate(-110%, 25%);
                }
              }
            }
            > .titbox {
              top: -3rem;
              > .text {
                > p {
                  &:nth-of-type(2) {
                    font-size: 1.4rem;
                  }
                }
              }
            }
            > .echarts {
              position: absolute;
              top: 14.5rem;
              left: 50%;
              height: 16rem;
              width: 22rem;
              transform: translate(-50%, 0);
            }
            &.active {

            }
          }
        }
      }
      > .audiobox {
        position: absolute;
        width: 10rem;
        top: 1.3rem;
        right: 50%;
        transform: translate(120%, 0);
        z-index: 3;
        > .audiobtn {
          position: absolute;
          top: 0px;
          right: 0px;
          height: 3rem;
          width: 3rem;
          background: url("../images/autoplayer.svg") no-repeat center center/cover;
          animation: rotate 2s linear infinite paused;
        }
        > .btnline {
          position: absolute;
          top: -4px;
          right: 15px;
          width: 2px;
          height: 38px;
          background-color: #fff;
          transform: rotate(45deg);
          display: none;
        }
      }
    }
  }
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loading {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes name {
  0% {
    transform: scale(0, 0);
  }
  20% {
    transform: scale(1.3, 1.3);
  }
  40% {
    transform: scale(0.8, 0.8);
  }
  60% {
    transform: scale(1.15, 1.15);
  }
  80% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}

@keyframes text {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}